<template>
  <t-layout>
    <t-aside>
      <t-layout style="margin: 10px 10px 0 10px">
        <t-header style="width: 100%; height: 38px; padding-top: 5px">
          <t-button theme="default" variant="text"> <t-icon name="file" /></t-button>
        </t-header>
        <t-content>
          <t-space direction="vertical" style="width: 100%; height: 500px">
            <t-collapse>
              <t-collapse-panel value="0" header="">
                <template #expandIcon><t-icon name="file-import" /></template>
                <div class="usepanel">
                  <input id="document" type="file" />
                </div>
              </t-collapse-panel>
              <t-collapse-panel value="1" header="">
                <template #expandIcon><t-icon name="file-export" /></template>
                <div class="usepanel"></div>
              </t-collapse-panel>
              <t-collapse-panel value="2" header="">
                <template #expandIcon><t-icon name="file-setting" /></template>
                <div class="usepanel">
                  <t-select
                    v-model="selType"
                    @change="typeChange"
                    size="small"
                    placeholder="请选择类型"
                    style="margin-top: 10px"
                  >
                    <t-option key="apple" label="markdown" value="markdown" />
                    <t-option key="orange" label="text" value="text"></t-option>
                    <t-option key="banana" label="html" value="html" />
                  </t-select>
                  <t-input
                    v-model="level[0]"
                    size="small"
                    placeholder="一级标题格式"
                    style="margin-top: 10px"
                  />
                  <t-input
                    v-model="level[1]"
                    size="small"
                    placeholder="二级标题格式"
                    style="margin-top: 10px"
                  />
                  <t-input
                    v-model="level[2]"
                    size="small"
                    placeholder="三级标题格式"
                    style="margin-top: 10px"
                  />
                </div>
              </t-collapse-panel>
              <t-collapse-panel value="3" header="">
                <template #expandIcon><t-icon name="list" /></template>
                <div class="usepanel">
                  <t-tree
                    ref="tree"
                    @active="onActive"
                    @expand="onExpand"
                    activable
                    hover
                    transition
                  />
                </div>
              </t-collapse-panel>
            </t-collapse>
            <div></div>
          </t-space>
        </t-content>
        <t-footer style="margin: 10px">
          <t-button theme="default" variant="text"> <t-icon name="save" /> </t-button>
          <t-button theme="default" variant="text" @click="parsing"
            ><t-icon name="file-1"
          /></t-button>
        </t-footer>
      </t-layout>
    </t-aside>
    <t-content>
      <t-tabs @change="onChange" :default-value="1">
        <t-tab-panel :value="1" label="markdown">
          <div id="markdown" />
        </t-tab-panel>
        <t-tab-panel :value="2" label="htmlcode">
          <t-textarea autosize allowInputOverMax v-model="htmlContent" placeholder="请输入内容" />
        </t-tab-panel>
        <t-tab-panel :value="3" label="选项卡3">
          <div v-html="htmlContent"></div>
        </t-tab-panel>
      </t-tabs>
    </t-content>
  </t-layout>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
const mdValue = ref('')
const htmlContent = ref('')

import Vditor from 'vditor'
import 'vditor/dist/index.css'

const vditor = ref()
const markdown = ref()

onMounted(() => {
  document
    .getElementById('document')
    .addEventListener('change', readFileInputEventAsArrayBuffer, false)
  // 初始化编辑器
})
// 销毁
onBeforeUnmount(() => {
  //vditor.value.destroy()
})

import mammoth from 'mammoth'
import { marked } from 'marked'

const tree = ref()
//const catalog = ref([])

const selType = ref('')
const level = ref([])
const typeChange = (selectValue) => {
  if (selectValue == 'markdown') {
    level.value = ['#', '##', '###']
  } else if (selectValue == 'html') {
    level.value = ['H1', 'H2', 'H3']
  } else if (selectValue == 'text') {
    level.value = ['第*部', '第*章', '第*节']
  }
  alert(level.value[0])
}

const onChange = (tabValue) => {
  // if (1 == tabValue) vditor.value.setValue('tabValue')
  //if (2 == tabValue) htmlContent.value = marked(mdValue.value)
  //alert(tabValue)
}

const readFileInputEventAsArrayBuffer = (event) => {
  var file = event.target.files[0]
  var reader = new FileReader()

  reader.onload = function (loadEvent) {
    var arrayBuffer = loadEvent.target.result
    mammoth
      .convertToMarkdown({ arrayBuffer: arrayBuffer })
      .then((result) => {
        mdValue.value = result.value
        vditor.value.setValue(mdValue.value)
      })
      .done()
  }
  reader.readAsArrayBuffer(file)
}

const parsing = function () {
  let compile = { label: '全文', value: 1, content: mdValue.value }
  tree.value.appendTo(compile)
  ParsingContent(mdValue.value, 1, 1)
}
const ParsingContent = function (compile, id, level) {
  console.log('id:' + id + ' level:' + level)
  let reg = regex(level)
  if (!reg.test(compile)) return
  var sections = compile.split(reg)

  sections.forEach((item, index) => {
    const found = item.match(/([\w|\x20|\u4e00-\u9fa5]*?)\n/)
    item = item.replace(found[0], '')
    let value = id * 10 + index
    console.log('level:' + level + ' new id:' + value + ' found[1]:' + found[1])
    if (found[1] == '') found[1] = '引言'
    let data = { label: found[1], value: value, content: item }
    tree.value.appendTo(id, data)
    ParsingContent(item, value, level + 1)
  })
}
const regex = (level) => {
  let sReg = new RegExp('\\s#{' + level + '}\\s', 'g')
  return sReg
}
const onExpand = (value) => {
  console.log('onExpand' + value)
}
const onActive = (value, context) => {
  console.log(context.node.data.content)
  mdValue.value = context.node.data.content
  alert(value)
}
</script>
<style>
.usepanel {
  margin-left: -30px;
}
</style>
